<template>
  <li class="relative">
    <button
      class="dropdown-menu flex items-center relative hover:cursor-pointer select-none"
      @click="toggleDropdown"
    >
      分类
      <span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-5 w-5"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            fill-rule="evenodd"
            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
            clip-rule="evenodd"
          />
        </svg>
      </span>
    </button>

    <div
      :class="{ hidden: !dropdownOpen }"
      class="dropdown-item-content absolute top-9 w-32 transition ease-in-out delay-150 z-50"
    >
      <ul class="bg-primary-700 py-2 px-4">
        <li class="plx-2 py-2">
          <a :href="'/'">全部</a>
        </li>
        <li
          v-for="category in info.results"
          :key="category.id"
          class="plx-2 py-2"
        >
          <a :href="'/?category_id=' + category.id" @click="toggleDropdown">{{
            category.name
          }}</a>
        </li>
      </ul>
    </div>
  </li>
</template>

<script>
import axios from "axios";

export default {
  name: "Category",
  data: function () {
    return {
      info: "",
      dropdownOpen: false,
    };
  },
  mounted() {
    this.get_category_info();
  },
  methods: {
    toggleDropdown() {
      this.dropdownOpen = !this.dropdownOpen;
    },
    get_category_info() {
      axios.get("/api/category/").then((response) => {
        this.info = response.data;
      });
    },
  },
};
</script>
